﻿// 数据
var dateBase = new Date();
var year = dateBase.getFullYear();
var dottedBase = +dateBase + 1000 * 3600 * 24;
var weekCategory = [];

var radarData = [];
var radarDataAvg = [];
var maxData = 12000;
var weekMaxData = [];
var weekLineData = [];


// 周数据
for (var i = 0; i < 7; i++) {
    // 日期
    var date = new Date(dottedBase -= 1000 * 3600 * 24);
    weekCategory.unshift([
        date.getMonth() + 1,
        date.getDate()
    ].join('/'));

    // 折线图数据
    weekMaxData.push(maxData);
    var distance = Math.round(Math.random() * 11000 + 500);
    weekLineData.push(distance);

    // 雷达图数据
    // 我的指标
    var averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
    var maxSpeed = averageSpeed + (+(Math.random() * 3).toFixed(2));
    var hour = +(distance / 1000 / averageSpeed).toFixed(1);
    var radarDayData = [distance, averageSpeed, maxSpeed, hour];
    radarData.unshift(radarDayData);

    // 平均指标
    var distanceAvg = Math.round(Math.random() * 8000 + 4000);
    var averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
    var maxSpeedAvg = averageSpeedAvg + (+(Math.random() * 2).toFixed(2));
    var hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
    var radarDayDataAvg = [distanceAvg, averageSpeedAvg, maxSpeedAvg, hourAvg];
    radarDataAvg.unshift(radarDayDataAvg);
}

// 颜色设置
var color = {
    linearYtoG: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [{
            offset: 0,
            color: '#f5b44d'
        }, {
            offset: 1,
            color: '#28f8de'
        }]
    },
    linearGtoB: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 0,
        colorStops: [{
            offset: 0,
            color: '#43dfa2'
        }, {
            offset: 1,
            color: '#28f8de'
        }]
    },
    linearBtoG: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 0,
        colorStops: [{
            offset: 0,
            color: '#1c98e8'
        }, {
            offset: 1,
            color: '#28f8de'
        }]
    },
    areaBtoG: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0,
            color: 'rgba(35,184,210,.2)'
        }, {
            offset: 1,
            color: 'rgba(35,184,210,0)'
        }]
    }
};

var option = {
    title: {
        text: '一周跑步数据',
        textStyle: {
            color: '#fff',
            fontSize: 32,
            fontWeight: 'normal'
        },
        subtext: year + '/' + weekCategory[6],
        subtextStyle: {
            color: '#fff',
            fontSize: 16,
        },
        top: 50,
        left: 80
    },
    legend: {
        top: 220,
        left: 80,
        orient: 'vertical',
        itemGap: 15,
        itemWidth: 12,
        itemHeight: 12,
        data: ['平均指标', '我的指标'],
        textStyle: {
            color: '#fff',
            fontSize: 14,
        },
    },
    tooltip: {
        trigger: 'item'
    },
    radar: {
        center: ['68%', '27%'],
        radius: '40%',
        name: {
            color: '#fff'
        },
        splitNumber: 8,
        axisLine: {
            lineStyle: {
                color: color.linearYtoG,
                opacity: .6
            }
        },
        splitLine: {
            lineStyle: {
                color: color.linearYtoG,
                opacity: .6
            }
        },
        splitArea: {
            areaStyle: {
                color: '#fff',
                opacity: .1,
                shadowBlur: 25,
                shadowColor: '#000',
                shadowOffsetX: 0,
                shadowOffsetY: 5,
            }
        },
        indicator: [{
            name: '全程距离(m)',
            max: maxData
        }, {
            name: '平均速度(km/h)',
            max: 10
        }, {
            name: '最快速度(km/h)',
            max: 12
        }, {
            name: '总计时间(h)',
            max: 3.5
        }]
    },
    grid: {
        left: 90,
        right: 80,
        bottom: 40,
        top: '60%',
    },
    xAxis: {
        type: 'category',
        position: 'bottom',
        axisLine: true,
        axisLabel: {
            color: 'rgba(255,255,255,.8)',
            fontSize: 12
        },
        data: weekCategory,
    },
    yAxis: {
        name: 'km/h',
        nameLocation: 'end',
        nameGap: 24,
        nameTextStyle: {
            color: 'rgba(255,255,255,.5)',
            fontSize: 14
        },
        max: maxData,
        splitNumber: 4,

        axisLine: {
            lineStyle: {
                opacity: 0
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#fff',
                opacity: .1
            }
        },
        axisLabel: {
            color: 'rgba(255,255,255,.8)',
            fontSize: 12

        }
    },
    series: [{
        name: '每日跑步指标分布与比较',
        type: 'radar',
        symbolSize: 0,
        data: [{
            value: radarDataAvg[6],
            name: '平均指标',
            itemStyle: {
                normal: {
                    color: '#f8d351',
                }
            },
            lineStyle: {
                normal: {
                    opacity: 0,
                }
            },
            areaStyle: {
                normal: {
                    color: '#f8d351',
                    shadowBlur: 25,
                    shadowColor: 'rgba(248,211,81,.3)',
                    shadowOffsetX: 0,
                    shadowOffsetY: -10,
                    opacity: 1
                }
            },
        }, {
            value: radarData[6],
            name: '我的指标',
            itemStyle: {
                normal: {
                    color: '#43dfa2',
                }
            },
            lineStyle: {
                normal: {
                    opacity: 0,
                }
            },
            areaStyle: {
                normal: {
                    color: color.linearGtoB,
                    shadowBlur: 15,
                    shadowColor: 'rgba(0,0,0,.2)',
                    shadowOffsetX: 0,
                    shadowOffsetY: 5,
                    opacity: .8
                }
            },
        }]
    }, {
        name: '每日跑步里程',
        type: 'line',
        smooth: true,
        symbol: 'emptyCircle',
        symbolSize: 8,
        itemStyle: {
            normal: {
                color: '#fff'
            }
        },
        lineStyle: {
            normal: {
                color: color.linearBtoG,
                width: 3
            }
        },
        areaStyle: {
            normal: {
                color: color.areaBtoG,
            }
        },
        data: weekLineData,
        lineSmooth: true,
        markLine: {
            silent: true,
            data: [{
                type: 'average',
                name: '平均值'
            }],
            precision: 0,
            label: {
                normal: {
                    formatter: '平均值: \n {c}'
                }
            },
            lineStyle: {
                normal: {
                    color: 'rgba(248,211,81,.7)'
                }
            }
        },
        tooltip: {
            position: 'top',
            formatter: '{c} m',
            backgroundColor: 'rgba(28,152,232,.2)',
            padding: 6
        }
    }, {
        name: '占位背景',
        type: 'bar',
        itemStyle: {
            normal: {
                show: true,
                color: '#000',
                opacity: 0
            }
        },
        silent: true,
        barWidth: '50%',
        data: weekMaxData,
        animation: false
    }, {
        name: '占位背景',
        type: 'bar',
        itemStyle: {
            normal: {
                show: true,
                color: '#000',
                opacity: .1
            }
        },
        silent: true,
        barWidth: '50%',
        barGap: 0,
        data: weekMaxData,
        animation: false
    }],
    backgroundColor: '#383546',
};

// 点击事件
myChart.on('click', function(params) {
    if (params.componentType === 'series' && params.seriesType === 'line') {

        var dataIndex = params.dataIndex;
        myChart.setOption({
            series: [
                {
                    name: '每日跑步指标分布与比较',
                    type: 'radar',
                    symbolSize: 0,
                    data: [{
                        name: '平均指标',
                        value: radarDataAvg[dataIndex],
                        itemStyle: {
                            normal: {
                                color: '#f8d351',
                            }
                        },
                        lineStyle: {
                            normal: {
                                opacity: 0,
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: '#f8d351',
                                shadowBlur: 25,
                                shadowColor: 'rgba(248,211,81,.3)',
                                shadowOffsetX: 0,
                                shadowOffsetY: -10,
                                opacity: 1
                            }
                        },
                    }, {
                        name: '我的指标',
                        value: radarData[dataIndex],
                        itemStyle: {
                            normal: {
                                color: '#43dfa2',
                            }
                        },
                        lineStyle: {
                            normal: {
                                opacity: 0,
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: color.linearGtoB,
                                shadowBlur: 15,
                                shadowColor: 'rgba(0,0,0,.2)',
                                shadowOffsetX: 0,
                                shadowOffsetY: 5,
                                opacity: .8
                            }
                        },
                    }]
                }]
        })
    }
});
